<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <button-counter></button-counter>
    <hr>
    <!--子组件间数据是独立的-->
    <button-counter></button-counter>

    <hr>
    <hello-word></hello-word>
    <!--报错-->
    <!--<helloWord></helloWord>-->
</div>

<script type="text/javascript">
    Vue.component('button-counter', {
        //data必须是函数形式,闭包环境保证数据独立
        data: function () {
            return {
                count: 0,
                count1:1,
                step:2,

            }
        },
        //只能有单个根元素
        // template: '<div>' +
        //         '<button @click="count+=step">点击了{{count}}次</button>' +'<br>'+
        //         '<button @click="add">点击了{{count1}}次</button>' +
        // '</div>',

        //模板字符串形式
        template: `
            <div>
                <button @click="count+=step">点击了{{count}}次</button><br>
                <button @click="add">点击了{{count1}}次</button>
                <hello-word></hello-word>
                <helloWord></helloWord>
            </div>`,

        methods:{
            add:function(){
                this.count1+=3;
            }
        }
    })
    Vue.component('helloWord',{
        data:function(){
            return {
                msg:'helloWord'
            }
        },
        template:"<div>{{msg}}</div>"
    })
    var app = new Vue({
        el: '#app',
        data: {}
    })

</script>

</body>
</html>